<template>
	<section class="coffeehouse">
		<div class="wrapper">
			<h2>XPEL车衣讲堂</h2>
			<p>了解更多XPEL车衣文化</p>
		</div>
		<div class="scroll-wrapper">
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <a class="swiper-slide transition" href="/article0">
			        	<div class="bg-image coffee-cultivation"></div>
			        	<span>车衣知识</span>
			        	<p>车衣的作用</p>
			        </a>
			        <a class="swiper-slide transition" href="/article">
			        	<div class="bg-image fundamentals"></div>
			        	<span>车衣品鉴</span>
			        	<p>车衣的鉴定</p>
			        </a>
			        <a class="swiper-slide transition" href="/article2">
			        	<div class="bg-image roast-story"></div>
			        	<span>车衣知识</span>
			        	<p>车衣的发展</p>
			        </a>
			        <a class="swiper-slide transition" href="/article3">
			        	<div class="bg-image pour-over"></div>
			        	<span>车衣品鉴</span>
			        	<p>车衣的优势</p>
			        </a>
			    </div>
			</div>
		</div>
		<div class="swiper-btn swiper-button-prev transition">
	    	<img src="@/assets/icons/icon-scroll-left.svg">
	    </div>
	    <div class="swiper-btn swiper-button-next transition">
	    	<img src="@/assets/icons/icon-scroll-right.svg">
	    </div>
	</section>
</template>
<script>

	import Swiper from 'swiper';
	import 'swiper/dist/css/swiper.min.css'

	export default {
		data(){
			return{

			}
		},
		mounted(){
			this.swiperScrollConfig();
		},
		methods: {
			swiperScrollConfig(){
				let swiper_scroll_ad = new Swiper ('.coffeehouse .swiper-container', {

					direction: 'horizontal',
				    loop: false,
				    slidesPerView: 'auto',
				    freeMode: true,
				    mousewheel: true,
				    navigation: {
				      nextEl: '.coffeehouse .swiper-button-next',
				      prevEl: '.coffeehouse .swiper-button-prev',
				    },

				});
			}
		}
	}

</script>
